<%@include file="/WEB-INF/common/taglibs.jsp"%>
<script type="text/javascript" src="${ctx}/resources/js/datatable-query.js"></script>
 <style>
.select2-input {
	min-width: 200px;
}
</style>


<div class="row-fluid">

	<div class="span12">

		<div class="page-header">
			<h4>Member</h4>
		</div>



		<form class="form-horizontal seperator" method="post">
			<div class="form-row row-fluid">
				<div class="span12">
					<div class="row-fluid">
						<ul id="myTab1" class="nav nav-tabs">
							<li class="active"><a href="#basicInfo" data-toggle="tab">Basic
									Info</a></li>
									<c:if test="${entity.id ne null }">
							<li class=""><a href="#address" data-toggle="tab">Address
									Info</a></li>
									</c:if>
 						</ul>
					</div>
				</div>
				<div class="tab-content">
					<div class="tab-pane fade in active" id="basicInfo">
					<div class="form-horizontal">
 <!--surName --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="surName">SurName :</label><input class="span9" id="surName" name="surName"   type="text" value="${entity.surName}" /></div></div></div>
<!--givenName --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="givenName">GivenName :</label><input class="span9" id="givenName" name="givenName"   type="text" value="${entity.givenName}" /></div></div></div>
<!--company --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="company">Company :</label><input class="span9" id="company" name="company"   type="text" value="${entity.company}" /></div></div></div>
<!--email --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="email">Email :</label><input class="span9" id="email" name="email"   type="text" value="${entity.email}" /></div></div></div>
<!--telephone --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="telephone">Telephone :</label><input class="span9" id="telephone" name="telephone"   type="text" value="${entity.telephone}" /></div></div></div>
<!--fax --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="fax">Fax :</label><input class="span9" id="fax" name="fax"   type="text" value="${entity.fax}" /></div></div></div>
<!--newsLetter --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="newsLetter">NewsLetter :</label><div class="left marginT5 marginR10"><div class="radio" id="uniform-newsLetter1"><span class="<c:if test="${entity.newsLetter }">checked</c:if>"><input type="radio" name="newsLetter" id="newsLetter1" value="true" <c:if test="${entity.newsLetter}">checked="checked"</c:if> style="opacity: 0;"></span></div>True</div><div class="left marginT5 marginR10"><div class="radio" id="uniform-newsLetter2"><span class="<c:if test="${!entity.newsLetter}">checked</c:if>"><input type="radio" <c:if test="${!entity.newsLetter}">checked="checked"</c:if>name="newsLetter" id="newsLetter2" value="false" style="opacity: 0;"></span></div>False</div></div></div></div>
 
 
 
 							<div class="form-row row-fluid">
								<div class="span12">
									<div class="row-fluid">
										<label class="form-label span3" for="normal">Password:</label>
										<div class="span4 controls">
											<input class="span12" id="password" name="password"
												type="password" placeholder="Enter your password"
												value="${entity.password}" /> <input class="span12"
												id="passwordConfirm" name="confirm_password" type="password"
												placeholder="Enter your password again" />
										</div>
									</div>
								</div>
							</div>

							 

							<div class="form-row row-fluid">
								<div class="span12">
									<div class="row-fluid">
										<label class="form-label span3" for="nric">Birthday:</label> <input
											class="span4 datepicker" name="birthday" type="text"
											value="<fmt:formatDate pattern="yyyy-MM-dd" value="${entity.birthday}" />">
									</div>
								</div>
							</div>

 							 <div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="home.addressLine1">Residential Address</label><input class="span9" id="home.addressLine1" name="home.addressLine1" type="text" value="${entity.home.addressLine1}" /></div></div></div>
 							 
							<div class="form-row row-fluid">
								<div class="span12">
									<div class="row-fluid">
										<label class="form-label span3">Status:</label>
										<div class="span4 controls">
											<select name="status">
												<c:if test="${not empty memberStatus}">
													<c:forEach var="status" items="${memberStatus}">
														<option value="${status}"
															${(status == entity.status)?'selected':''}>${status}</option>
													</c:forEach>
												</c:if>
											</select>
										</div>
									</div>
								</div>
							</div>

							<div class="form-row row-fluid">
								<div class="span12">
									<div class="row-fluid">
										<label class="form-label span3" for="textarea">Remark</label>
										<textarea name="remark" class="span4 limit elastic"
											id="textarea2" rows="3" cols="5">${entity.remark}</textarea>
									</div>
								</div>
							</div>


						</div>
					</div>
<c:if test="${entity.id ne null }">
					<div class="tab-pane fade in" id="address">
						<div class="form-horizontal">
			<div class="span12">
	<div class="box gradient">
	 
		<div class="title">
				<h4>
				<span>Mailing Address </span> <span class="box-form right"> </span>
				
				<span class="box-form right mailingAddress_bar"><a href="#" class="btn btn-mini addMailingAddress">Add Mailing Address</a></span>
 				</h4>
 				<a href="#" class="minimize"> </a>
			</div>
		 <div class="content scrollable clearfix">
		<table class="table table-bordered table-vertical-centre mailingAddressTable">
			<thead>
				<tr>
					<th><a class="select_all"><span class="icomoon-icon-checkmark-2"></span></a></th>
<th>Name </th>
<th>AddressLine1 </th>
<th>AddressLine2 </th>
<th>Country </th>
 <th>PostCode </th>
 <th>Telephone </th>
<th>Mobile </th>
<th>State </th>
<th>Fax </th>
<th>Email </th>
<th>Website </th>
<th>ContactPerson </th>
<th>ContactEmail </th>
<th>SurName </th>
<th>GivenName </th>
<th>City </th>
<th>LiveCountry </th>
<th>Zone </th>

 					<th>Action</th>
				</tr>
			</thead>
		</table>
		</div>
	 
</div>
 </div>





<script>
 
 

$(document).ready(function(){
	var del = {
			id : 'mailingAddressDel',
			text  : 'Del',
			domain : "Mailing Address",
			operation : "Del",
			url : "${ctx}/admin/mailing-address/del/",
			selector : ".mailingAddress_bar",
			selects  : $('.mailingAddressTable'),
	  
	};
	johnny.tableBtn(del);
	
 	
	
	$('.addMailingAddress').click(function(){
	$("#mailingAddressDiv").find("div.modal-body").find("input,select,textarea,checkbox").not("[name=action],[type=hidden]").each(function(step,value){
	 									$(value).val("");
	 							});
	
	
	
	 $("#mailingAddressDiv input[name='action']").val("${ctx}/admin/mailing-address/create/");
 	 $("#mailingAddressDiv").modal('show');
  });
	
	  $(document).delegate('.mailingAddressTable .icomoon-icon-pencil', 'click', function(event) {
		  
		  	var id = $(this).parent().attr("dataid");
			$.ajax({
				url : "${ctx}/admin/mailing-address/"+id+"/edit/",
				type : "GET",
				dataType : "json",
				success : function(data){		
					if(data && data.state && (data.state.indexOf("ERROR") != -1)){
						johnny.error(data.message);
						return;
					}else{
							var entity = data.entity;
 							$("#mailingAddressDiv").find("div.modal-body").find("input,select,textarea,checkbox").not("[name=action],[type=hidden]").each(function(step,value){
									var name = $(value).attr("name");
 									if (entity[name]){
										$(value).val(entity[name]);
 										$(value).uniform();
 									}else if (name.match(/Id$/)){
										var pro = name.substring(0,name.length-2);
										if (entity[pro] &&entity[pro].id){
											$(value).val(entity[pro].id);
	 										$(value).uniform();
 										}
 									
									}
									else{
 										$(value).val("");
									}
								
							});
							
							
  							$("#mailingAddressDiv input[name='action']").val("${ctx}/admin/mailing-address/"+id+"/edit/");
     	    				$("#mailingAddressDiv").modal('show');
 					}
				}
			});		  
 
	     
	    });
	var recordColumn = ['','name','addressLine1','addressLine2','country','postCode','telephone','mobile','state','fax','email','website','contactPerson','contactEmail','surName','givenName','city','liveCountry','zone'];
	
	 $('.mailingAddressTable').dataTable({
		"bLengthChange" : true,
		"aoColumnDefs" : [ {
			'bSortable' : false,
			'aTargets' : [0,3 ]
		} ],
 		"sAjaxSource" : '${ctx}/admin/mailing-address/${entity.id}/',
		"createQueryData" : function (aoData){
				return	johnny.initQueryData(aoData, recordColumn);
		},
		"createResult" : function (json, echo){
 			var dataArray = new Array();
			for ( var i = 0; i < json.result.length; i++) {
				var subArray = new Array();
				var value = johnny.getForSelect(json.result[i].id);
				subArray.push(value);
				subArray.push(json.result[i].name)
subArray.push(json.result[i].addressLine1)
subArray.push(json.result[i].addressLine2)
subArray.push(json.result[i].country)
subArray.push(json.result[i].postCode)
 
subArray.push(json.result[i].telephone)
subArray.push(json.result[i].mobile)
subArray.push(json.result[i].state)
subArray.push(json.result[i].fax)
subArray.push(json.result[i].email)
subArray.push(json.result[i].website)
subArray.push(json.result[i].contactPerson)
subArray.push(json.result[i].contactEmail)
subArray.push(json.result[i].surName)
subArray.push(json.result[i].givenName)
subArray.push(json.result[i].city)
subArray.push(json.result[i].liveCountry)
subArray.push(json.result[i].zone)

   				var conf = [{
					link : 'javascript:void(1)',
					dataId : json.result[i].id,
					text : 'edit',
					css  : 'icomoon-icon-pencil'
				} 
				
				];
				subArray.push(johnny.getGridLink(conf)); 
  				dataArray.push(subArray);
			}
			return {
				sEcho : echo,
				iTotalRecords : json.totalCount,
				iTotalDisplayRecords : json.totalCount,
				aaData : dataArray
			};
		}		
	});
	 
	
	
	
	
});


</script>
	</div>
					</div>
</c:if>







			

							 
					
				</div>
				
				 
			</div>
			<div class="form-row row-fluid">
				<div class="span12">
					<div class="row-fluid">
						<div class="form-actions">
							<div class="span3"></div>
							<div class="span4 controls">
								<button type="submit" class="btn btn-info marginR10">Save
									changes</button>
								<button class="btn btn-danger">Cancel</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	

	
	</div>
	<!-- End .span12 -->

</div>
<!-- End .row-fluid -->


 <div id="mailingAddressDiv" class="modal hide fade"  selector=".mailingAddressTable" style="display: none; ">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>	Mailing Address  </h3>
	</div>
 
	<div class="modal-body">
  						<input type="hidden" name="action" >
 						<input type="hidden" name="customerId"  value="${entity.id}"> 						
  						<!--name --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="name">Name :</label><input class="span9" id="name" name="name"   type="text" value="" /></div></div></div>
<!--surName --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="surName">SurName :</label><input class="span9" id="surName" name="surName"   type="text" value="" /></div></div></div>
<!--givenName --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="givenName">GivenName :</label><input class="span9" id="givenName" name="givenName"   type="text" value="" /></div></div></div>
<!--city --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="city">City :</label><input class="span9" id="city" name="city"   type="text" value="" /></div></div></div>
 <!--addressLine1 --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="addressLine1">AddressLine1 :</label><input class="span9" id="addressLine1" name="addressLine1"   type="text" value="" /></div></div></div>
<!--addressLine2 --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="addressLine2">AddressLine2 :</label><input class="span9" id="addressLine2" name="addressLine2"   type="text" value="" /></div></div></div>
<!--country --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="country">Country :</label><input class="span9" id="country" name="country"   type="text" value="" /></div></div></div>
<!--postCode --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="postCode">PostCode :</label><input class="span9" id="postCode" name="postCode"   type="text" value="" /></div></div></div>
<!--telephone --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="telephone">Telephone :</label><input class="span9" id="telephone" name="telephone"   type="text" value="" /></div></div></div>
<!--mobile --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="mobile">Mobile :</label><input class="span9" id="mobile" name="mobile"   type="text" value="" /></div></div></div>
<!--state --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="state">State :</label><input class="span9" id="state" name="state"   type="text" value="" /></div></div></div>
<!--fax --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="fax">Fax :</label><input class="span9" id="fax" name="fax"   type="text" value="" /></div></div></div>
<!--email --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="email">Email :</label><input class="span9" id="email" name="email"   type="text" value="" /></div></div></div>
<!--website --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="website">Website :</label><input class="span9" id="website" name="website"   type="text" value="" /></div></div></div>
<!--contactPerson --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="contactPerson">ContactPerson :</label><input class="span9" id="contactPerson" name="contactPerson"   type="text" value="" /></div></div></div>
<!--contactEmail --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="contactEmail">ContactEmail :</label><input class="span9" id="contactEmail" name="contactEmail"   type="text" value="" /></div></div></div>
<!--liveCountry --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="liveCountry">LiveCountry :</label><input class="span9" id="liveCountry" name="liveCountry"   type="text" value="" /></div></div></div>
<!--zone --><div class="form-row row-fluid"><div class="span12"><div class="row-fluid"><label class="form-label span3" for="zone">Zone :</label><input class="span9" id="zone" name="zone"   type="text" value="" /></div></div></div>

						 
	</div>
	 
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a>
		<a href="#" class="btn btn-primary modal-submit">Save changes</a>
	</div>

</div>
 